<template>
  <section>
    <form>
      <input placeholder="编辑它" v-model="message">
      <p>消息内容是：{{message}}</p>
    </form>
    <hr>
    <form>
      <textarea cols="30" rows="5" placeholder="添加多行文本" v-model="multiMessage"></textarea>
      <br>
      <span>多行文本是</span>
      <p class="pre">{{multiMessage}}</p>
    </form>
    <hr>
    <form>
      <input type="checkbox" id="checkbox" v-model="checkbox">
      <label for="checkbox">{{checkbox}}</label>
    </form>
    <hr>
    <form>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      <br>
      <span>选中的名字：{{checkedNames}}</span>
    </form>
    <hr>
    <form>
      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
      <span>选择的是：{{picked}}</span>
    </form>
    <hr>
    <form>
      <select v-model="selected">
        <option value disabled>请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <br>
      <span>选择的项是：{{selected}}</span>
    </form>
    <hr>
    <form>
      <select class="multi" v-model="multiSelected" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <br>
      <span>选项的多项是：{{multiSelected}}</span>
    </form>
    <form>
      <select v-model="selected">
        <option v-for="(item, index) in options" :key="index">{{item.value}}</option>
      </select>
      <br>
      <span>选项的项是：{{selected}}</span>
    </form>
  </section>
</template>

<script>
export default {
  name: "BasicForms",
  data() {
    return {
      message: "",
      multiMessage: "",
      checkbox: false,
      checkedNames: [],
      picked: "",
      selected: "",
      multiSelected: [],
      options: [
        { text: "一", value: "A" },
        { text: "二", value: "B" },
        { text: "三", value: "C" }
      ]
    };
  }
};
</script>

<style scoped>
.pre {
  white-space: pre;
}

.multi {
  width: 150px;
}
</style>
